<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author ThinkGem
-->
<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('整单撤销')"
    :showOkBtn="true"
    :cancelText="t('common.closeText')"
    @register="registerModal"
    @ok="handleRevoke"
    :minHeight="200"
    width="80%"
  >
    <div class="jeesite-bpm-trace">
      <div class="box-table">
        <div class="title"> {{ t('当前操作会删除一下数据，请谨慎操作！') }} </div>
        <BasicTable @register="registerTable" />
      </div>
    </div>
    <template #insertFooter>
      <a-button type="default" @click="handleCopy">
        <!-- CopyOutlined -->
        <Icon icon="i-ant-design:copy-outlined" />
        一键复制
      </a-button>
    </template>
  </BasicModal>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsWmsRdRd32Rdrecord32ListModal',
    inheritAttrs: false,
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { findRd32NextBill, rdrecord32Revoke } from '/@/api/wms/rd/rd32/rdrecord32';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { FormGroup } from '/@/components/Form';

  const emit = defineEmits(['update:selectData']);

  const { t } = useI18n('bpm.button');
  const { createMessage } = useMessage();

  const { getSelectRowKeys } = useTable();
  const dataId = ref<string>();

  const tableDataSource = ref<Recordable[]>([]);

  const [registerTable, { getDataSource }] = useTable({
    dataSource: tableDataSource,
    columns: [
      {
        title: t('名称'),
        dataIndex: 'billName',
        width: 150,
      },
      {
        title: t('单号'),
        dataIndex: 'billVal',
        width: 200,
      },
    ],
    pagination: false,
    bordered: true,
    size: 'small',
    inset: true,
  });

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data = {}) => {
    console.log('data', data);
    setModalProps({ loading: true });
    dataId.value = data.id;
    const res = await findRd32NextBill(data);
    tableDataSource.value = res || [];

    setModalProps({ loading: false });
  });

  async function handleRevoke() {
    // 加一个loading
    setModalProps({ loading: true });
    const res = await rdrecord32Revoke({ id: dataId.value });
    if (res.result == 'true') {
      closeModal();
      emit('success');
      setModalProps({ loading: false });
    } else {
      // createMessage.error(res.message);
    }
  }

  // 复制数据到粘贴板
  function handleCopy() {
    const textToCopy = tableDataSource.value
      .map((item) => {
        // 按表格列的 dataIndex 提取数据
        return `${item.billName}\t${item.billVal}`;
      })
      .join('\n'); // 使用换行符连接每一行

    const { clipboardRef, isSuccessRef } = useCopyToClipboard(textToCopy);

    // 根据复制结果显示消息
    if (isSuccessRef.value) {
      createMessage.success(t('复制成功'));
    } else {
      createMessage.error(t('复制失败'));
    }
  }
</script>
<style lang="less">
  .title {
    color: red;
    width: 100%;
    font-size: 18px;
    //text-decoration: underline;
    //font-style: oblique;
    padding: 0 0 3px 3px;
    margin: 0 10px 20px;
    font-weight: bold;
  }
  .jeesite-bpm-trace {
    position: relative;

    .box-model {
      text-align: center;

      .box-title {
        padding: 5px;
        margin-bottom: 5px;
        font-weight: bold;



        span {
          padding-right: 5px;
        }
      }

      .box-tool {
        margin-top: 20px;
      }

      .nav-tree a {
        white-space: normal;
        word-break: break-all;
      }

      svg {
        display: inline-block;
      }
    }
  }
</style>
